<!DOCTYPE html>
<html>
    <head>
        <title>Camera Stream</title>
        <link rel="stylesheet" href="/static/css/style.css">
    </head>
    <body>
        <div class="container">
            <h1>摄像头和控制中心</h1>
            <div class="video-container">
                <img id="videoStream" src="/video_feed" alt="Camera Feed">
                <button id="reconnect" style="margin-top:10px;padding:5px;">重新连接摄像头</button>
            </div>
            <div class="joystick-container">
                <h2>手柄数据</h2>
                <div id="joystick-data">
                    <p>等待数据...</p>
                </div>
                <div class="control-panel">
                    <button id="start-control" class="btn btn-start">启动机器人控制</button>
                    <button id="stop-control" class="btn btn-stop">停止机器人控制</button>
                </div>
                <div class="control-panel">
                    <h3>右摇杆功能</h3>
                    <select id="right-stick-mode">
                        <option value="none">不使用</option>
                        <option value="servo">控制舵机</option>
                        <option value="light">控制灯光</option>
                    </select>
                </div>
                <div id="status-indicator" class="status-stopped">状态: 已停止</div>
            </div>
            <div class="links">
                <a href="/joystick/view">查看所有手柄数据</a>
                <a href="/status">服务器状态</a>
            </div>
        </div>
        <script src="/static/js/main.js"></script>
    </body>
</html>
